<template>
  <div>
    <button @click="po" ref="btn" :class="classType" @blur="po2">
      <span :class="color"
        ><i :class="icon"></i
        ><i :class="{ 'el-icon-loading': loading }" v-if="loading">&nbsp;</i
        ><slot></slot
      ></span>
    </button>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      classType: {
        primary: this.type === "primary",
        success: this.type === "success",
        info: this.type === "info",
        warning: this.type === "warning",
        danger: this.type === "danger",
        text: this.type === "text",
        textd: this.type === "text" && this.disabled,
        loading: this.loading,
        disabled: this.disabled,
        plain: this.plain,
        round: this.round,
      },
      color: "",
    };
  },
  props: {
    type: {
      type: String,
    },
    plain: {
      type: Boolean,
    },
    round: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
    },
    icon: {
      type: String,
    },
    loading: {
      type: Boolean,
    },
  },
  created() {
    if (this.plain) {
      this.classType = {
        primaryP: this.type === "primary",
        successP: this.type === "success",
        infoP: this.type === "info",
        warningP: this.type === "warning",
        dangerP: this.type === "danger",
        text: this.type === "text",
        textd: this.type === "text" && this.disabled,
        loading: this.loading,
        disabled: this.disabled,
        plain: this.plain,
        round: this.round,
      };
    }
  },
  mounted() {
    // console.log(this.$refs.p.style);
    // this.color = this.$refs.p.style;
  },
  computed: {},
  methods: {
    po() {
      if (this.disabled) {
        return;
      }
      if (this.plain) {
        this.classType = {
          primary: this.type === "primary",
          success: this.type === "success",
          info: this.type === "info",
          warning: this.type === "warning",
          danger: this.type === "danger",
          text: this.type === "text",
          textd: this.type === "text" && this.disabled,
          loading: this.loading,
          disabled: this.disabled,
          plain: this.plain,
          round: this.round,
        };
        this.$emit("btnclick");
      } else {
        this.$refs.btn.style.opacity = 0.7;
        this.$emit("btnclick");
      }
    },
    po2() {
      if (this.disabled) {
        return;
      }
      if (this.plain) {
        this.classType = {
          primaryP: this.type === "primary",
          successP: this.type === "success",
          infoP: this.type === "info",
          warningP: this.type === "warning",
          dangerP: this.type === "danger",
          text: this.type === "text",
          textd: this.type === "text" && this.disabled,
          loading: this.loading,
          disabled: this.disabled,
          plain: this.plain,
          round: this.round,
        };
        this.$emit("btnclick");
      } else {
        this.$refs.btn.style.opacity = 1;
        this.$emit("btnclick");
      }
    },
  },
};
</script>
<style lang='less'  scoped>
button {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  &:hover{
    opacity: 0.7;
  }
}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary {
  background-color: #409eff;
  color: #fff;
}
.success {
  background-color: #67c23a;
  color: #fff;
}
.info {
  background-color: #909399;
  color: #fff;
}
.warning {
  background-color: #e6a23c;
  color: #fff;
}
.danger {
  background-color: #f56c6c;
  color: #fff;
}
.text {
  border: none;
  color: blue;
}
.textd {
  border: none;
  color: #ccc;
}
.loading {
  opacity: 0.7;
}
.primaryP {
  background-color: rgba(64, 158, 255, 0.3);
  color: #409eff;
}
.successP {
  background-color: rgba(103, 194, 58, 0.3);
  color: #67c23a;
}
.infoP {
  background-color: rgba(144, 147, 153, 0.3);
  color: #909399;
}
.warningP {
  background-color: rgba(230, 162, 60, 0.3);
  color: #e6a23c;
}
.dangerP {
  background-color: rgba(245, 108, 108, 0.3);
  color: #f56c6c;
}
.round {
  border-radius: 20px;
}
</style>